<template>
<!-- pc修改个人信息界面 -->
  <div>
    <el-row>
      <el-col :span="9">
        <div class="grid-content bg-purple-dark">

          <el-form :model="cusData">
            <el-form-item label="姓名" >
              <h3>{{cusData.name}}</h3>
            </el-form-item>
            <el-form-item label="电话" >
              <h3>{{cusData.phone}}</h3>
            </el-form-item>
            <el-form-item label="账号" >
              <h3>{{cusData.account}}</h3>
            </el-form-item>
            <el-form-item label="密码" >
              <h3>******</h3>
            </el-form-item>
          </el-form>
          <el-button type="success" size="mini"  @click="ChangeCus">修改信息</el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改个人信息" :visible.sync="dialogChangeCus" :modal="false">
      <el-form  label-width="80px" >

        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="custom.name">{{ custom.name}}</el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input  placeholder="请输入电话号码" v-model="custom.phone">{{ custom.phone }}</el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input  placeholder="请输入账号" v-model="custom.account">{{ custom.account}}</el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="custom.password">{{ custom.password }}</el-input>
        </el-form-item>

      </el-form>

      <div slot="footer">
        <el-button @click="dialogChangeCus = false">取 消</el-button>
        <el-button type="primary" @click="updateCus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data(){
    return{
      cusData:'',
      dialogChangeCus:false,
      custom:{id:'',name:'',phone:'',account:'',password:''}

    }
  },
  methods:{
    queryCus(){
      let jwt = localStorage.getItem("jwt");
      let account  = sessionStorage.getItem("account");
      this.$axios.get('api/customer/selectMyself?account='+account,
          {headers:{"jwt":jwt}})
          .then(response=>{
            console.log(response.data.data)
            if(response.data.code == 200 ){
              this.cusData = response.data.data


            }else{

            }
          })
    },

    ChangeCus(){
      this.dialogChangeCus = true;
      this.custom.id = this.cusData.id;
      this.custom.name = this.cusData.name;
      this.custom.phone = this.cusData.phone;
      this.custom.account = this.cusData.account;
      this.custom.password = this.cusData.password;



    },
    updateCus(){
      let jwt = localStorage.getItem("jwt");
      this.$axios.post('api/customer/updateCustomByIdtMy',this.custom,{headers:{'jwt':jwt}})
          .then(response=>{
            console.log(response.data)
            this.dialogChangeCus = false;
            this.queryCus();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          })
    }
  },
  created() {
    this.queryCus();
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;

}
.el-col {

}
.el-form{
  text-align: center;
}
</style>